<template>
    <div>
        <div class="showDetailExamine" v-load="loading"  v-if="examineDetail.status==1">
            <van-nav-bar class="navBar" title="月租审核详情" fixed/>
            <div class="mainWrap fixedMain">
                <el-form ref="form" :model="examineForm" label-width="80px" size="mini" class="formWrap">
                    <el-form-item label="用户姓名">
                        <el-input v-model="examineForm.userName" disabled></el-input>
                    </el-form-item>
                    <el-form-item label="手机号">
                        <el-input v-model="examineForm.phone" disabled></el-input>
                    </el-form-item>
                    <el-form-item label="车牌号">
                        <el-input v-model="examineForm.carNum" disabled></el-input>
                    </el-form-item>
                    <el-form-item label="地址">
                        <el-input v-model="examineForm.userAddress" disabled></el-input>
                    </el-form-item>
                    <el-form-item label-width="0" style="margin-bottom:0" v-for="(item,index) in parkInfoList" :key="index">
                        <el-form-item label="车场">
                            <!-- <el-input v-model="examineForm.carParkName" disabled></el-input> -->
                            <el-checkbox v-model="checkedGroup[index]" @change="((val)=>chkChange(val,index))">{{item.name}}</el-checkbox>
                        </el-form-item>
                        <el-form-item label="收费标准">
                            <el-select v-model="freeIds[index]" placeholder="请选择收费标准" class="fullWidth" :disabled="!checkedGroup[index]" @change="(val)=>freeChange(val,index)">
                                <el-option :label="item.name" :value="item.id" v-for="(item,index) in feesList" :key="index"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-form-item>
                    <el-form-item label="部门">
                        <el-select v-model="examineForm.groupId" placeholder="请选择部门" class="fullWidth">
                            <el-option :label="item.name" :value="item.id" v-for="(item,index) in groupList" :key="index"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="车辆类型">
                        <el-select v-model="examineForm.carTyme" placeholder="请选择车辆类型" class="fullWidth">
                            <el-option label="月租车" :value="1"></el-option>
                            <el-option label="储值车" :value="2"></el-option>
                            <el-option label="免费车" :value="3"></el-option>
                            <el-option label="临时车" :value="4"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="月卡套餐">
                        <el-checkbox-group v-model="examineForm.packIds">
                            <el-checkbox :label="item.id" name="type" v-for="(item,index) in packageList" :key="index">{{item.name}}</el-checkbox>
                            <!-- <el-checkbox label="地推活动" name="type"></el-checkbox>
                            <el-checkbox label="线下主题活动" name="type"></el-checkbox>
                            <el-checkbox label="单纯品牌曝光" name="type"></el-checkbox> -->
                        </el-checkbox-group>
                    </el-form-item>
                    
                    <el-form-item label="开始时间">
                        <el-date-picker value-format="yyyy-MM-dd HH:mm:ss" type="datetime" placeholder="选择日期" 
                            v-model="examineForm.startTime" class="fullWidth">
                        </el-date-picker>
                    </el-form-item>
                    <el-form-item label="结束时间">
                        <el-date-picker value-format="yyyy-MM-dd HH:mm:ss" type="datetime" placeholder="选择日期" 
                            v-model="examineForm.endTime" class="fullWidth">
                        </el-date-picker>
                    </el-form-item>
                    <el-form-item>
                        <el-image :src="examineForm.imgUrl" :fit="fit"  class="fullWidth"></el-image>
                    </el-form-item>
                    <el-form-item size="mini">
                        <el-button type="primary" @click="onSubmit">通过</el-button>
                        <el-button type="danger" @click="onRefuse">拒绝</el-button>
                    </el-form-item>
                </el-form>
                <el-dialog class="dialog"
                    title="拒绝"
                    :visible.sync="confirmdialog"
                    :before-close="changeAsyncCancle"
                    width="90%">
                    <div class="content">
                        <el-input v-model="params.remark" placeholder="请输入拒绝理由"  type="textarea"  row="6"></el-input>
                    </div>
                    <span slot="footer" class="dialog-footer" center>
                        <el-button type="primary" @click="changeAsyncOK('form')" size="mini">确 定</el-button>
                        <el-button @click="changeAsyncCancle('form')" size="mini">取消</el-button>
                    </span>
                </el-dialog>
            </div>
        </div>
        <div class="showDetailExamine examineStatus"  v-if="examineDetail.status==2">
            <h3>消息已处理</h3>
        </div>
        <div class="showDetailExamine examineStatus"  v-if="examineDetail.status==3">
            <h3>审核失败</h3>
        </div>
    </div>
</template>
<script>
    import { GetQueryByString,getUrlParam,timeFormate } from '@/utils'
export default {
    data() {
        return {
            depId:'',
            loading:false,
            examineDetail:{},
            parkInfoList:[],
            checkedGroup:[],
            packageList:[],
            groupList:[],
            feesList:[],
            arrList:[],
            parkIds:[],
            freeIds:[],
            examineForm:{
                applyId:"",
                userName:"",
                phone:"",
                carNum:"",
                carParkName:"",
                userAddress:"",
                groupId:"",
                carTyme:"",
                packIds:[],
                parkId:'',
                startTime:timeFormate(new Date()),
                endTime:timeFormate(new Date()),
                imgUrl:"",
                status:2
            },
            params:{
                applyId:"",
                carTyme:"",
                freeId:"",
                groupId:"",
                packIds:"",
                startTime:"",
                endTime:"",
                remark:"",
                status:2,  //审核意见:2通过，3拒绝  
            },
            confirmdialog:false
        }
    },
    created(){
        /* let id = getUrlParam('id')
        this.init(id); */
        this.initDataFn();
    },
    methods: {
        initDataFn(){
            try {
                debugger
                const url=window.location.href;//获取当前地址栏
                const aid=GetQueryByString(url,'aid');//GetQueryByString 自己封装的方法来获取地址栏的参数
                let start=url.indexOf("code");
                const code=url.substr(start+5,32);
                //alert(url)
                const appIdVal2 = GetQueryByString(url,'appId')
                sessionStorage.setItem('appId',JSON.parse(JSON.stringify(appIdVal2)))

                console.log(start,'start')

                if (start>=0){//如果存在code  , type:0
                    this.loading = true;
                    let formData = new FormData();
                        formData.append('code',code)
                        formData.append('type',0)
                        formData.append('appId',appIdVal2)
                    this.$api.login.wxlogin(formData)  //code作为换取access_token的票据，每次用户授权带上的code将不一样，code只能使用一次，5分钟未被使用自动过期。
                        .then(res => {
                            console.log(res,"blankpageRes")
                            this.loading = false;
                            if(res.code == 200){
                                this.$store.dispatch('setUser', res.result.userInfo)
                                this.$store.dispatch('setOrgCategory', res.result.park.orgCategory)
                                sessionStorage.setItem('token',res.result.token)
                                if(res.result.depart){                        
                                    sessionStorage.setItem('departName',res.result.depart.departName)
                                    this.$store.dispatch('setDepartInfo', res.result.depart)
                                }
                                let examineId = getUrlParam('examineId')
                                this.init(examineId);
                            }else if(res.code == 201){
                                /* window.location.replace(
                                    window.location.origin + "/login?openid="+res.message
                                ); */
                                this.$router.push({
                                    path:"/login",
                                    query:{
                                        openid:res.message,
                                        appId:config.appID
                                    }
                                })
                            }
                        })
                        .catch(err => {
                            
                        });
                }
            } catch (err) {

            }
        },
        async init(id){
            const toast = this.$toast.loading({
                duration: 0, // 持续展示 toast
                forbidClick: true,
                message: "加载中..."
            });
            this.loading = true;
            let params = {
                id:id
            }
            this.$api.home.applyById(params).then(res=>{
                if(res.code == 200){
                    this.examineDetail = res.result
                    this.depId = this.examineDetail.depId
                    this.initData()                  
                }else{
                    this.$toast(res.message);
                }
            }).catch((res) => {
                this.loading = false;
            });
        },
        async initData(){
            this.parkInfoList.map((o,i)=>{
                return this.checkedGroup.push(false)
            })
            //debugger
            let params = {
                depId:this.depId
            }
            await this.$api.home.getZybFeesList(params).then(res=>{
                if(res.code == 200){
                    this.feesList = res.result.records 
                    console.log(this.feesList,'feesList')                      
                }else{
                    this.$toast(res.message);
                }
            }).catch((res) => {
                this.loading = false;
            });
            await this.$api.home.getPackageList(params).then(res=>{
                if(res.code == 200){
                    //debugger
                    this.packageList = res.result.records 
                    console.log(this.packageList,'packageList')                 
                }else{
                    this.$toast(res.message);
                }
            }).catch((res) => {
                this.loading = false;
            });

            await this.$api.home.getGroupList(params).then(res=>{
                this.$toast.clear();
                if(res.code == 200){
                    //debugger
                    this.arrList = [];
                    this.groupList = this.readNodes(JSON.parse(JSON.stringify(res.result)))
                    console.log(this.groupList,'groupList')              
                }else{
                    this.$toast(res.message);
                }
            }).catch((res) => {
                this.$toast.clear();
                this.loading = false;
            });

            //this.examineForm = this.examineDetail  
            this.examineForm.applyId = this.examineDetail.id
            this.examineForm.userName = this.examineDetail.userName
            this.examineForm.phone = this.examineDetail.phone
            this.examineForm.carNum = this.examineDetail.carNum
            this.examineForm.userAddress = this.examineDetail.userAddress
            this.examineForm.imgUrl = this.examineDetail.imgUrl
            this.parkInfoList = this.examineDetail.parkInfoList||[]
        },
        chkChange(val,index){
            if(val){
                this.parkIds.push(this.parkInfoList[index].id)
            }else{
                this.parkIds.splice(this.parkIds.findIndex(e => e === this.parkInfoList[index].id), 1)
                this.freeIds.splice(index,1)
            }
            console.log(this.parkIds,'this.parkIds')
            console.log(this.freeIds,'this.freeIds')
        },
        freeChange(val,index){
            //this.freeIds.push(val)
            console.log(this.freeIds,'this.freeIds')
        },
        readNodes (treeData) {
            let obj = {
                id:"",
                name:""
            }
            for (let item of treeData) {
                obj = {
                    id:item.id,
                    name:item.name
                }
                //debugger
                this.arrList.push(obj)
                if (item.childList&&item.childList!=null && item.childList.length) {
                    this.readNodes(item.childList)
                }
            }
            return this.arrList
        },
        onSubmit(){
            for (let index = 0; index < this.checkedGroup.length; index++) {
                const element = this.checkedGroup[index];
                if(!element){
                    this.$message.error('请选择车场');
                    return false
                }
                const item = this.freeIds[index];
                //debugger
                if(!item){
                    this.$message.error('请选择收费标准');
                    return false
                }
            }
            if(this.examineForm.groupId=='') return this.$message.error('请选择部门');
            if(this.examineForm.carTyme=='') return this.$message.error('请选择车辆类型');
            if(this.examineForm.packIds=='') return this.$message.error('请选择月卡套餐');
            if(this.examineForm.startTime=='') return this.$message.error('请选择开始时间');
            if(this.examineForm.endTime=='') return this.$message.error('请选择结束时间');

            this.examineForm.parkId = this.parkIds.map((o,i)=>{return o+"#"+this.freeIds[i]})
            console.log(this.examineForm,"examineForm")
            const toast = this.$toast.loading({
                duration: 0, // 持续展示 toast
                forbidClick: true,
                message: "加载中..."
            });
            let formData = new FormData()
                formData.append("applyId",this.examineForm.applyId)
                formData.append("carTyme",this.examineForm.carTyme)
                formData.append("parkId",this.examineForm.parkId.join(','))
                formData.append("groupId",this.examineForm.groupId)
                formData.append("packIds",this.examineForm.packIds.join(','))
                formData.append("startTime",this.examineForm.startTime)
                formData.append("endTime",this.examineForm.endTime)
                formData.append("status",this.examineForm.status)
                formData.append("addOneOwner",false)
                debugger
            this.$api.home.reviewerMonthCar(formData).then(res=>{
                this.$toast.clear();
                this.$router.go(-1)
                this.$toast(res.message);  
                /* this.$dialog.confirm({
                    message: res.message,
                })
                .then(() => {
                    // on confirm
                    const toast = this.$toast.loading({
                        duration: 0, // 持续展示 toast
                        forbidClick: true,
                        message: "加载中..."
                    });
                    let formData = new FormData()
                        formData.append("applyId",this.examineForm.applyId)
                        formData.append("carTyme",this.examineForm.carTyme)
                        formData.append("freeId",this.examineForm.freeId)
                        formData.append("groupId",this.examineForm.groupId)
                        formData.append("packIds",this.examineForm.packIds.join(','))
                        formData.append("startTime",this.examineForm.startTime)
                        formData.append("endTime",this.examineForm.endTime)
                        formData.append("status",this.examineForm.status)
                        formData.append("addOneOwner",true)
                    this.$api.home.reviewerMonthCar(formData).then(res=>{
                        this.$toast.clear();
                        if(res.code == 200){
                            this.$router.go(-1)
                            this.$toast(res.message);               
                        }else{
                            this.$toast(res.message);
                        }
                    }).catch((res) => {
                        this.$toast.clear();
                    });
                })
                .catch(() => {
                    // on cancel
                    this.$toast("已取消");
                }); */
            }).catch((res) => {
                this.$toast.clear();
            });
        },
        onRefuse(){
            this.confirmdialog = true
        },
        changeAsyncOK(){
            console.log(this.examineForm,"examineForm")
            if(this.params.remark==""){
                this.$message.error("请输入拒绝的理由");
                return
            }
            let formData = new FormData()
                formData.append("applyId",this.examineForm.applyId)
                formData.append("remark",this.params.remark)
                formData.append("status",3)
                //debugger
            this.$api.home.reviewerMonthCar(formData).then(res=>{
                this.onClickLeft()
            })
        },
        changeAsyncCancle(){
            this.confirmdialog = false
            this.params.remark = ""
        }  
    },
}
</script>
<style lang="less" scoped>
    body{
        #app{
            height:auto;
            .child-view{
                display: inline-block;
                width: 100%;
                .mainWrap{
                    margin-bottom: 0;
                    background-color: #f2f2f2;
                }
            }
        }
    }
    
    .formWrap{
        display: inline-block;
        width: calc(100% - .6rem);
        margin: 0.3rem;
        padding: .3rem .2rem;
        background-color: #fff;
        border-radius: .1rem;
        box-sizing: border-box;
        .fullWidth{
            width: 100%;
        }
    }
    .examineStatus{
        h3{
            margin-top:2rem;
            font-size: .35rem;
            text-align: center;
        }
    }
</style>